import { View, Text, Image, Swiper, SwiperItem } from '@tarojs/components'
import { useState, useMemo, memo, useEffect } from 'react';
import Taro from '@tarojs/taro';
import like from '../../assets/like.png'
import like2 from '../../assets/like2.png'
import collect from '../../assets/collect.png'
import collect2 from '../../assets/collect2.png'
import shadow from '../../assets/Shadow@2x.png'
import { VirtualWaterfall } from '@tarojs/components-advanced'
import './index.scss'
const imageList = ['https://images.pexels.com/photos/6473736/pexels-photo-6473736.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', 'https://images.pexels.com/photos/8128700/pexels-photo-8128700.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', 'https://images.pexels.com/photos/7153017/pexels-photo-7153017.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', 'https://images.pexels.com/photos/7153018/pexels-photo-7153018.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1']

const Home = () => {
  const [index, setIndex] = useState(0)

  return (
    <View className='Home'>
      <View className="swiper_banner">
        <Swiper className='Swiper' current={index} circular onChange={e => setIndex(e.target.current)}>
          {imageList.map(item => (
            <SwiperItem key={item}>
              <View className="SwiperItem" style={{ backgroundImage: `url(${item})` }}>
                <View>
                  <Text>活动</Text>
                </View>
                <Text className="text">过年惊喜送不停！</Text>
                <Text className="text">邀请好友注册AI出图</Text>
                <Text className="text">我们将送出免费的5次出图机会！</Text>
                <View className="">查看详情</View>
              </View>
            </SwiperItem>
          ))}
        </Swiper>
        <View className="swiper_images">
          <View style={{ width: `${imageList.length * 192}rpx` }}>
            {imageList.map((url, i) =>
              <Image className={`${index === i ? 'active' : ''}`} src={url} onClick={() => setIndex(i)} mode="aspectFill" key={url} />
            )}
          </View>
        </View>
        <View className="swiper_line">
          {imageList.map((url, i) =>
            <View className={`${index === i ? 'active' : ''}`} style={{ width: `${100 / imageList.length}%` }}></View>
          )}
        </View>
      </View>
      <View className="Home_list">
        {imageList.map(e => <View className="Home_list_item" onClick={() => Taro.navigateTo({url:'details/index'})} key={e}>
          <Image className="Home_list_item_bg" src={e} mode="widthFix" />
          <View className="Home_list_item_userinfo">
            <Image className="Home_list_item_avatar" src={e} />
            <View>
              <Text>我是陈冠希我是陈冠希我是陈冠希我是陈冠希</Text>
              <Text>UID：129673918237UID：129673918237</Text>
            </View>
          </View>
          <View className='Home_list_item_btns'>
            <View>
              <Image src={collect2} />
              <Text>300</Text>
            </View>
            <View>
              <Image src={like2} />
              <Text>300</Text>
            </View>
          </View>
        </View>)}
      </View>
    </View>
  )
}
export default Home